<template>
  <div class="PwdLogin">
    <p class="PwdLogin-title">密码登录</p>
    <i-phone-number @SentButtonColor="GetButtonColor"></i-phone-number>
    <!-- 输入框 -->
    <div class="PwdLogin-paw-box">
      <p>密码</p>
      <div class="PwdLogin-forget">忘记密码?</div>
    </div>
    <!-- 密码输入框 -->
    <van-cell-group>
      <van-field
        v-model="passeValue"
        type="password"
        placeholder="请输入密码"
      />
    </van-cell-group>
    <!-- 登录按钮 -->
    <!-- 发送验证码按钮 -->
    <van-button
      class="sendButton"
      :color="PswButtonColor"
      type="blue"
      block
      @click="SetStorage"
      >登录</van-button
    >
  </div>
</template>

<script>
import IPhoneNumber from "./IPhoneNumber.vue";
export default {
  components: { IPhoneNumber },
  name: "PwdLogin",
  props: ["toPath"],
  data() {
    return {
      passeValue: "",
      IphoneValue: "",
      PswButtonColor: "#dee2e6",
    };
  },
  mounted() {
    console.log(this.toPath);
  },
  methods: {
    // 获取按钮颜色
    GetButtonColor(data) {
      this.PswButtonColor = data.ButtonColor;
      // 从组件传过来的手机号 因为那一块功能被人封装成组件了
      this.IphoneValue = data.IphoneValue;
      // console.log("paw", data);
    },
    // 本地存储
    SetStorage() {
      let logMessage = {
        user: this.IphoneValue,
        pass: this.passeValue,
      };
      localStorage.setItem("user", JSON.stringify(logMessage));
      this.$toast.success("登录成功");
      this.$router.replace(this.toPath);
      console.log(localStorage.getItem("user"));
    },
  },
};
</script>

<style lang="scss" scoped>
.PwdLogin {
  .PwdLogin-title {
    margin-top: 5rem;
    padding: 0.625rem 0 2.5rem 0.625rem;
  }
  // 密码和忘记密码模块
  .PwdLogin-paw-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    p {
      font-size: 0.8125rem;
      padding: 0.625rem 0.875rem;
    }
    // 忘记密码
    .PwdLogin-forget {
      font-size: 0.8125rem;
      margin-right: 0.875rem;
      color: #cab681;
    }
  }
  // 密码输入框
  .van-cell-group {
    .van-field {
      // border-bottom: 2px solid #ccc;
      box-shadow: var(--boxsizi);
    }
  }
  // 登录按钮
  .sendButton {
    width: 90%;
    padding: 0.625rem;
    margin: 1.25rem 5% 0;
    border: none;
    box-sizing: border-box;
  }
}
</style>